<template>
    <div class="page">
        <!-- 头部导航 -->
        <div class="nav-header">
            <van-icon name="arrow-left" size="34" @click="onClickLeft" />
            <div class="title">客服中心</div>
            <div></div>
        </div>
        
        <div class="content">
            <!-- 头部问候 -->
            <div class="greeting-section">
                <div class="avatar">
                    <img src="../../assets/images/meituan.png" alt="客服头像">
                </div>
                <div class="greeting-text">
                    Hi，团团很高兴为您服务
                </div>
            </div>

            <!-- 业务选择部分 -->
            <div class="quick-service-section">
                <div class="quick-service-header">
                    <span>热门服务</span>
                    <span class="more" @click="showBusinessPopup">更多服务 <van-icon name="arrow" /></span>
                </div>
                <div class="quick-service-grid">
                    <div class="quick-service-item" @click="selectService('外卖')">
                        <div class="service-icon">
                            <van-icon name="shop-o" size="36" color="#ffc300"/>
                        </div>
                        <span>外卖问题</span>
                    </div>
                    <div class="quick-service-item" @click="selectService('退款')">
                        <div class="service-icon">
                            <van-icon name="refund-o" size="36" color="#ff9f1c"/>
                        </div>
                        <span>申请退款</span>
                    </div>
                    <div class="quick-service-item" @click="selectService('账户')">
                        <div class="service-icon">
                            <van-icon name="user-o" size="36" color="#07c160"/>
                        </div>
                        <span>账户相关</span>
                    </div>
                </div>
            </div>
            
            <!-- 聊天区域 -->
            <div class="chat-container">
                <div class="chat-messages" ref="chatMessages">
                    <div v-for="(message, index) in messages" :key="index" :class="['message', message.type]">
                        <div v-if="message.type === 'received'" class="avatar-small">
                            <img src="../../assets/images/meituan.png" alt="客服头像">
                        </div>
                        <div class="message-content">
                            {{ message.content }}
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部输入框 -->
            <div class="chat-input-container">
                <div class="input-wrapper">
                    <input 
                        type="text" 
                        v-model="newMessage" 
                        placeholder="请简单描述您的问题" 
                        @keyup.enter="sendMessage"
                    />
                    <div class="input-actions">
                        <van-icon name="smile-o" size="35" color="#999"/>
                        <van-button round type="primary" size="normal" @click="sendMessage">发送</van-button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 全部业务弹窗 -->
        <van-popup
            v-model="showPopup"
            position="bottom"
            round
            :style="{ height: '70%' }"
        >
            <div class="popup-header">
                <div class="popup-title">请选择您要咨询的业务类型</div>
                <van-icon name="cross" size="24" @click="showPopup = false" />
            </div>

            <div class="popup-content">
                <!-- 吃 生活 分类 -->
                <div class="category-section">
                    <div class="category-title">吃 生活</div>
                    <div class="category-grid">
                        <div class="category-item" @click="selectPopupService('外卖')">
                            <div class="category-icon waimai-icon">
                                <van-icon name="shop-o" size="32" color="#ffc300"/>
                            </div>
                            <span>外卖</span>
                        </div>
                    </div>
                </div>

                <!-- 生活 分类 -->
                <div class="category-section">
                    <div class="category-title">生活</div>
                    <div class="category-grid">
                        <div class="category-item" @click="selectPopupService('超市便利')">
                            <div class="category-icon">
                                <van-icon name="shopping-cart-o" size="32" color="#07c160"/>
                            </div>
                            <span>超市便利</span>
                        </div>
                        <div class="category-item" @click="selectPopupService('品质百货')">
                            <div class="category-icon">
                                <van-icon name="gift-o" size="32" color="#ff9f1c"/>
                            </div>
                            <span>品质百货</span>
                        </div>
                        <div class="category-item" @click="selectPopupService('鲜花绿植')">
                            <div class="category-icon">
                                <van-icon name="flower-o" size="32" color="#ff69b4"/>
                            </div>
                            <span>鲜花绿植</span>
                        </div>
                        <div class="category-item" @click="selectPopupService('买药')">
                            <div class="category-icon">
                                <van-icon name="cluster-o" size="32" color="#ff9f1c"/>
                            </div>
                            <span>买药</span>
                        </div>
                        <div class="category-item" @click="selectPopupService('跑腿')">
                            <div class="category-icon">
                                <van-icon name="guide-o" size="32" color="#ffc300"/>
                            </div>
                            <span>跑腿</span>
                        </div>
                        <div class="category-item" @click="selectPopupService('美团借钱')">
                            <div class="category-icon orange-bg">
                                <van-icon name="balance-pay" size="32" color="#ff9f1c"/>
                            </div>
                            <span>美团借钱</span>
                        </div>
                        <div class="category-item" @click="selectPopupService('美团联名卡')">
                            <div class="category-icon orange-bg">
                                <van-icon name="card" size="32" color="#ff9f1c"/>
                            </div>
                            <span>美团联名卡</span>
                        </div>
                        <div class="category-item" @click="selectPopupService('美团月付')">
                            <div class="category-icon yellow-bg">
                                <van-icon name="gold-coin-o" size="32" color="#ffc300"/>
                            </div>
                            <span>美团月付</span>
                        </div>
                        <div class="category-item" @click="selectPopupService('美团周付')">
                            <div class="category-icon green-bg">
                                <van-icon name="balance-o" size="32" color="#07c160"/>
                            </div>
                            <span>美团周付</span>
                        </div>
                    </div>
                </div>
                
                <!-- 底部指示条 -->
                <div class="bottom-indicator"></div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { Icon, Button, Popup, Toast } from 'vant';

export default {
    name: 'CustomerService',
    components: {
        [Icon.name]: Icon,
        [Button.name]: Button,
        [Popup.name]: Popup
    },
    data() {
        return {
            newMessage: '',
            messages: [],
            autoReplies: [
                "您好，很高兴为您服务！请问有什么可以帮助您的？",
                "感谢您的咨询，我们的客服人员会尽快处理您的问题。",
                "您的问题我们已经收到，正在为您查询相关信息。",
                "请问还有其他需要帮助的吗？",
                "如果您对我们的服务有任何建议，欢迎随时提出。"
            ],
            showPopup: false
        };
    },
    mounted() {
        // 添加初始欢迎消息
        setTimeout(() => {
            this.messages.push({
                content: "您好，我是美团客服团团，很高兴为您服务！有什么可以帮您的吗？",
                type: 'received'
            });
        }, 500);
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        sendMessage() {
            if (this.newMessage.trim() === '') return;
            
            // 添加用户消息
            this.messages.push({
                content: this.newMessage,
                type: 'sent'
            });
            
            const userMessage = this.newMessage;
            this.newMessage = '';
            
            // 模拟客服回复
            setTimeout(() => {
                let reply = "";
                
                // 针对"你好"特别回复
                if (userMessage.trim().toLowerCase() === "你好" || 
                    userMessage.trim().toLowerCase() === "hello" || 
                    userMessage.trim().toLowerCase() === "hi") {
                    reply = "您好！很高兴为您服务。请问有什么需要帮助的吗？";
                } else {
                    // 随机选择回复
                    reply = this.autoReplies[Math.floor(Math.random() * this.autoReplies.length)];
                }
                
                this.messages.push({
                    content: reply,
                    type: 'received'
                });
                
                this.$nextTick(() => {
                    this.scrollToBottom();
                });
            }, 1000);
            
            this.$nextTick(() => {
                this.scrollToBottom();
            });
        },
        scrollToBottom() {
            const chatContainer = this.$refs.chatMessages;
            if (chatContainer) {
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }
        },
        showBusinessPopup() {
            this.showPopup = true;
        },
        selectService(service) {
            // 将选择的服务作为用户输入发送
            this.messages.push({
                content: `我需要咨询${service}相关问题`,
                type: 'sent'
            });
            
            // 模拟客服回复
            setTimeout(() => {
                const reply = `您好，已收到您关于${service}的咨询，请问具体是什么问题呢？`;
                
                this.messages.push({
                    content: reply,
                    type: 'received'
                });
                
                this.$nextTick(() => {
                    this.scrollToBottom();
                });
            }, 800);
            
            this.$nextTick(() => {
                this.scrollToBottom();
            });
        },
        selectPopupService(service) {
            // 关闭弹窗
            this.showPopup = false;
            
            // 将选择的服务作为用户输入发送
            setTimeout(() => {
                this.selectService(service);
            }, 300);
        }
    }
}
</script>

<style lang="less" scoped>
.page {
    width: 750px;
    margin: 0 auto;
    background: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 100px;
    font-family: "正楷";
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    width: 750px;
    margin: 0 auto;

    .title {
        font-size: 36px;
        font-weight: 500;
        position: absolute;
        left: 47%;
        transform: translateX(-50%);
    }
}

.content {
    margin-top: 108px;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    width: 100%;
    align-items: center;
}

.greeting-section {
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f5f5f5;
    width: 100%;
    
    .avatar {
        width: 120px;
        height: 120px;
        margin-bottom: 20px;
        border-radius: 50%;
        overflow: hidden;
        
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    
    .greeting-text {
        background: #fff;
        padding: 20px 36px;
        border-radius: 36px;
        font-size: 30px;
        color: #333;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
}

.quick-service-section {
    background: #fff;
    padding: 36px 32px 24px;
    margin: 0 24px 24px;
    border-radius: 16px;
    width: calc(100% - 48px);
    
    .quick-service-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 28px;
        
        span {
            font-size: 32px;
            color: #333;
            font-weight: 500;
        }
        
        .more {
            color: #999;
            font-size: 28px;
            display: flex;
            align-items: center;
            cursor: pointer;
            
            .van-icon {
                margin-left: 6px;
                font-size: 24px;
            }
        }
    }
    
    .quick-service-grid {
        display: flex;
        justify-content: space-between;
        
        .quick-service-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 33%;
            
            .service-icon {
                width: 100px;
                height: 100px;
                background: #fff9e6;
                border-radius: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 16px;
                
                &:active {
                    background: #fff0d0;
                }
            }
            
            span {
                font-size: 28px;
                color: #333;
                font-weight: 500;
            }
        }
    }
}

.chat-container {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    margin-bottom: 120px;
    width: calc(100% - 48px);
    
    .chat-messages {
        display: flex;
        flex-direction: column;
        gap: 28px;
        
        .message {
            display: flex;
            align-items: flex-start;
            max-width: 80%;
            
            &.received {
                align-self: flex-start;
            }
            
            &.sent {
                align-self: flex-end;
                flex-direction: row-reverse;
                
                .message-content {
                    background: #07c160;
                    color: #fff;
                    border-radius: 16px 4px 16px 16px;
                }
            }
            
            .avatar-small {
                width: 100px;
                height: 50px;
                margin-right: 18px;
                border-radius: 50%;
                overflow: hidden;
                
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            
            .message-content {
                padding: 20px 28px;
                background: #fff;
                border-radius: 4px 16px 16px 16px;
                font-size: 29px;
                color: #333;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
        }
    }
}

.chat-input-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    background: #f5f5f5;
    border-top: 1px solid #eee;
    width: 700px;
    margin: 0 auto;
    
    .input-wrapper {
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 36px;
        padding: 16px 28px;
        
        input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 31px;
            padding: 14px 0;
        }
        
        .input-actions {
            display: flex;
            align-items: center;
            gap: 20px;
            
            .van-button {
                height: 66px;
                font-size: 30px;
                padding: 0 30px;
            }
        }
    }
}

/* 弹窗样式 */
.van-popup {
    .popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32px;
        border-bottom: 1px solid #f5f5f5;
        
        .popup-title {
            font-size: 34px;
            font-weight: 500;
            color: #333;
        }
    }
    
    .popup-content {
        padding: 0 32px;
        overflow-y: auto;
        height: calc(100% - 100px);
    }
    
    .category-section {
        margin-bottom: 40px;
        
        .category-title {
            font-size: 32px;
            font-weight: 500;
            color: #333;
            margin: 24px 0;
            position: relative;
            
            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 8px;
                height: 32px;
                background-color: #ffc300;
                border-radius: 4px;
                margin-left: -16px;
            }
        }
        
        .category-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 32px;
            
            .category-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                
                .category-icon {
                    width: 80px;
                    height: 80px;
                    background: #fff9e6;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 12px;
                }
                
                .waimai-icon {
                    background-color: #fff9e6;
                }
                
                .orange-bg {
                    background-color: #fff2e8;
                }
                
                .yellow-bg {
                    background-color: #fff9e6;
                }
                
                .green-bg {
                    background-color: #f0fff0;
                }
                
                span {
                    font-size: 24px;
                    color: #333;
                    text-align: center;
                }
            }
        }
    }
    
    .bottom-indicator {
        width: 120px;
        height: 8px;
        background-color: #000;
        border-radius: 4px;
        margin: 20px auto;
        opacity: 0.2;
    }
}
</style> 